<section class="main">
  <input id="toggle-all" class="toggle-all" type="checkbox">
  <label for="toggle-all" (click)="onCompleteAllClicked()">Mark all as complete</label>
  <ul class="todo-list">
    <!-- These are here just to show the structure of the list items -->
    <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
    <li *ngFor="let todo of todos; trackBy: trackById" [ngClass]="{ 'completed': todo.completed, 'editing': todo.editing }">
      <app-todo-item [todo]="todo"></app-todo-item>
    </li>
  </ul>
</section>
